<template>
  <div>
    <div style="margin-bottom: 20px;">
      <el-checkbox v-model="checked" @change="checkboxChange">合并简图以减少加工批次</el-checkbox>
      <span v-show="checked" style="margin: 0 20px 0 40px;">合并范围</span>
      <el-radio-group v-show="checked" v-model="radio" @change="radioChange">
        <el-radio label="1">仅相同构件内钢筋合并</el-radio>
        <el-radio label="2">仅相同料单内钢筋合并</el-radio>
      </el-radio-group>
    </div>

    <el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark" :row-class-name="tableRowClassName">
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="workArea" label="工区" align="center"></el-table-column>
      <el-table-column prop="number" label="料单编号" align="center"></el-table-column>
      <el-table-column prop="subItem" label="分部分项" align="center"></el-table-column>
      <el-table-column prop="materialListName" label="料单名称" align="center"></el-table-column>
      <el-table-column prop="componentName" label="构件名称" align="center"></el-table-column>
      <el-table-column prop="serialNumber" label="料单序号" align="center"></el-table-column>
      <el-table-column prop="specifications" label="规格" align="center"></el-table-column>
      <el-table-column label="简图" align="center">
        <template slot-scope="scope">
          <img style="width: 100%;cursor: pointer;" :src="scope.row.diagram" alt="" @click="imgClick">
        </template>
      </el-table-column>
      <el-table-column prop="rebarLength" label="下料长度(mm)" align="center" width="120"></el-table-column>
      <el-table-column prop="numberOfRoots" label="根数" align="center"></el-table-column>
      <el-table-column prop="remarks" label="备注" align="center"></el-table-column>
    </el-table>

    <open-img-dialog ref="openImgDialog" />
  </div>
</template>

<script>
import openImgDialog from './open-img-dialog.vue'

export default {
  name: "",
  components: { openImgDialog },
  props: {},
  data() {
    return {
      checked: false,
      radio: '1',

      loading: false,
      tableData: [
        {
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ10',
          diagram: require("@/assets/temporary-images/g1.png"),
          rebarLength: 540,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ10',
          diagram: require("@/assets/temporary-images/g1.png"),
          rebarLength: 540,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ16',
          diagram: require("@/assets/temporary-images/g1.png"),
          rebarLength: 160,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '2#TL2',
          serialNumber: '1',
          specifications: 'φ16',
          diagram: require("@/assets/temporary-images/g1.png"),
          rebarLength: 160,
          numberOfRoots: 2,
          remarks: '上1排',
        },
      ],

      oldTableData: [
        {
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ10',
          diagram: require("@/assets/temporary-images/g1.png"),
          rebarLength: 540,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ10',
          diagram: require("@/assets/temporary-images/g1.png"),
          rebarLength: 540,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '1#TL1',
          serialNumber: '1',
          specifications: 'φ16',
          diagram: require("@/assets/temporary-images/g1.png"),
          rebarLength: 160,
          numberOfRoots: 2,
          remarks: '上1排',
        },{
          workArea: '工区1',
          number: 'LD123',
          subItem: '工区1-6#楼',
          materialListName: '料单名称1',
          componentName: '2#TL2',
          serialNumber: '1',
          specifications: 'φ16',
          diagram: require("@/assets/temporary-images/g1.png"),
          rebarLength: 160,
          numberOfRoots: 2,
          remarks: '上1排',
        },
      ],

      mergeDiagramData: {}
    };
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    reset() {
      this.checked = false
      this.radio = '1'
    },
    deliveryData() {
      this.mergeDiagramData = {
        checked: this.checked,
        radio: this.radio,
        tableData: this.tableData
      }
      this.$emit('mergeDiagramData', this.mergeDiagramData)
    },
    checkboxChange() {
      this.radio = '1'
      this.merge()
    },
    radioChange() {
      this.merge()
    },
    imgClick() {
      this.$refs.openImgDialog.add()
    },
    // 合并
    merge() {
      this.tableData = this.oldTableData
      let data = JSON.parse(JSON.stringify(this.tableData))
      if (this.checked && this.radio === '1') {
        // 构件名称 规格 下料长度（料单序号合并 根数相加）
        console.log('仅相同构件内钢筋合并')
        let newdata = [];
        let index = 1;
        let i = 0;
        for (let k in data) {
          let aaa = [];
          let { rebarLength, componentName, specifications } = data[i];
          let { rebarLength: rebarLength2, componentName: componentName2, specifications: specifications2 } = data[i + 1] || {};
          i++;
          //类型相同且内容相同
          if (rebarLength === rebarLength2 && componentName === componentName2 && specifications === specifications2) {
            index++;
          } else {
            if (index > 1) {
              data.forEach((item) => {
                if (item.componentName === data[k].componentName && item.rebarLength === data[k].rebarLength && item.specifications === data[k].specifications) {
                  aaa.push(item);
                }
              });
              newdata.push({
                ...data[k],
                arr: aaa,
                hasCol: index,
              });
            } else {
              newdata.push({
                ...data[k],
                hasCol: index,
              });
            }

            index = 1;
          }
        }
        newdata.forEach(item => {
          if (item.arr) {
            item.rebarLength = item.arr.map(items => {return items.rebarLength += items.rebarLength})[0]
            item.serialNumber = item.arr.map(items => {return items.serialNumber}).join(",")
          }
        })
        this.tableData = newdata
      }
      if (this.checked && this.radio === '2') {
        // 规格 下料长度（料单名称合并 料单序号合并 根数相加）
        console.log('仅相同料单内钢筋合并')
        let newdata = [];
        let index = 1;
        let i = 0;
        for (let k in data) {
          let aaa = [];
          let { rebarLength, specifications } = data[i];
          let { rebarLength: rebarLength2, specifications: specifications2 } = data[i + 1] || {};
          i++;
          //类型相同且内容相同
          if (rebarLength === rebarLength2 && specifications === specifications2) {
            index++;
          } else {
            if (index > 1) {
              data.forEach((item) => {
                if (item.rebarLength === data[k].rebarLength && item.specifications === data[k].specifications) {
                  aaa.push(item);
                }
              });
              newdata.push({
                ...data[k],
                arr: aaa,
                hasCol: index,
              });
            } else {
              newdata.push({
                ...data[k],
                hasCol: index,
              });
            }

            index = 1;
          }
        }
        newdata.forEach(item => {
          if (item.arr) {
            item.rebarLength = item.arr.map(items => {return items.rebarLength += items.rebarLength})[0]
            item.serialNumber = item.arr.map(items => {return items.serialNumber}).join(",")
            item.componentName = item.arr.map(items => {return items.componentName}).join(",")
          }
        })
        this.tableData = newdata
      }
    },
    tableRowClassName({row, rowIndex}) {
      if (row.hasCol > 1) {
        return 'warning-row';
      }
      return '';
    }
    // mergeArray(data) {
    //   let newdata = [];
    //   let index = 1;
    //   let i = 0;
    //   for (let k in data) {
    //     console.log(data[k])
    //     let aaa = [];
    //     let { rebarLength, componentName } = data[i];
    //     let { rebarLength: TYPE2, componentName: REMARK2 } = data[i + 1] || {};
    //     i++;
    //     //类型相同且内容相同
    //     if (rebarLength === TYPE2 && componentName === REMARK2) {
    //       index++;
    //     } else {
    //       if (index > 1) {
    //         data.forEach((item) => {
    //           if (item.componentName === data[k].componentName && item.rebarLength === data[k].rebarLength) {
    //             aaa.push(item);
    //           }
    //         });
    //         newdata.push({
    //           ...data[k],
    //           arr: aaa,
    //           hasCol: index,
    //         });
    //       } else {
    //         newdata.push({
    //           ...data[k],
    //           hasCol: index,
    //         });
    //       }

    //       index = 1;
    //     }
    //   }
    //   console.log(newdata);
    // }
  },
};
</script>

<style scoped lang="scss">
::v-deep {
  .el-table .warning-row {
    background: #fdf5e6;
  }
}
</style>
